Foros del Web » Programando para Internet » Javascript »

Menu desplegable PHP+javascript

Estas en el tema de Menu desplegable PHP+javascript en el foro de Javascript en Foros del Web. Buenas encontre un script para hacer un menu desplegable con php y javascript : es este: http://www.dhtmlgoodies.com/index.ht...slide_out_menu lo implemente para q pudiera coger los valores ...
  #1 (permalink)  
Antiguo 06/06/2006, 09:12
 
Fecha de Ingreso: diciembre-2003
Ubicación: Málaga
Mensajes: 495
Antigüedad: 20 años, 4 meses
Puntos: 0
Menu desplegable PHP+javascript

Buenas encontre un script para hacer un menu desplegable con php y javascript:

es este:

http://www.dhtmlgoodies.com/index.ht...slide_out_menu

lo implemente para q pudiera coger los valores de la base de datos y hasta ahi bien. Pero mi problema es k en la misma pagina compongo 2 menus: uno publico y otro privado. Pongo aki la modificación q le echo al script de la pagina (se q es un poco largo y un coñazo):

archivo.php (para cargar la funcion)
Código:
function cargar()
 {
   var privado=<? if ($sess_member_id){echo "1";}else{echo"0";}?>;
   if (privado==1)
   {
       initLeftMenu1();
   }
   initLeftMenu();
   window.onresize = resetPosition;
 }

archivo.js
Código:
	var timeBeforeAutoHide = 700;	// Microseconds to wait before auto hiding menu(1000 = 1 second)
	var slideSpeed_out = 10;	// Steps to move sub menu at a time ( higher = faster)
	var slideSpeed_in = 10;
	var slideTimeout_out = 25;	// Microseconds between slide steps ( lower = faster)
	var slideTimeout_in = 10;	// Microseconds between slide steps ( lower = faster)
	var showSubOnMouseOver = true;	// false = show sub menu on click, true = show sub menu on mouse over
	var fixedSubMenuWidth = false;	// Width of sub menu items - A number(width in pixels) or false when width should be dynamic
	var fixedSubMenuWidth_Public = false;	// Width of sub menu items - A number(width in pixels) or false when width should be dynamic
	var showSubOnMouseOver_Public = true;	// false = show sub menu on click, true = show sub menu on mouse over
	var xOffsetSubMenu = 0; 	// Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
	var slideDirection = 'right';	// Slide to left or right ?
	var activeSubMenuId = false;
	var activeSubMenuId_Public = false;
	var activeMainMenuItem = false;
 	var activeMainMenuItem_Public = false;
	var currentZIndex = 1000;
	var autoHideTimer = 0;
	var submenuObjArray = new Array();
 	var submenuObjArray_Public = new Array();
	var okToSlideInSub = new Array();
	var okToSlideInSub_Public = new Array();
	var subPositioned = new Array();
    var subPositioned_Public = new Array();

	function stopAutoHide()
	{
		autoHideTimer = -1;
	}
	function stopAutoHide_Public()
	{
		autoHideTimer = -1;
	}
	function initAutoHide()
	{
		autoHideTimer = 0;
		if(autoHideTimer>=0)autoHide();
	}

	function autoHide()
	{

		if(autoHideTimer>timeBeforeAutoHide)
		{

			if(activeMainMenuItem){
				activeMainMenuItem.className='';
				activeMainMenuItem = false;
			}

			if(activeSubMenuId){
				var obj = document.getElementById('subMenuDiv' + activeSubMenuId);
				showSub();
			}
		}else{
			if(autoHideTimer>=0){
				autoHideTimer+=50;
				setTimeout('autoHide()',50);
			}
		}
	}
//....
	function initAutoHide_Public()
	{
		autoHideTimer = 0;
		if(autoHideTimer>=0)autoHide_Public();
	}

	function autoHide_Public()
	{
		if(autoHideTimer>timeBeforeAutoHide)
		{

			if(activeMainMenuItem_Public){
				activeMainMenuItem_Public.className='';
				activeMainMenuItem_Public = false;
			}

			if(activeSubMenuId_Public){
				var obj = document.getElementById('subMenuDiv' + activeSubMenuId_Public);
				showSub_Public();
			}
		}else{
			if(autoHideTimer>=0){
				autoHideTimer+=50;
				setTimeout('autoHide_Public()',50);
			}
		}
	}

//.....
	function getTopPos(inputObj)
	{
	  var returnValue = inputObj.offsetTop;
	  while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetTop;
	  return returnValue;
	}

	function getLeftPos(inputObj)
	{
	  var returnValue = inputObj.offsetLeft;
	  while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;
	  return returnValue;
	}

	function showSub()
	{
		var subObj = false;
		if(this && this.tagName){
			var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
			okToSlideInSub[numericId] = false;
			var subObj = document.getElementById('subMenuDiv' + numericId);
			if(activeMainMenuItem)activeMainMenuItem.className='';
			if(subObj){
				if(!subPositioned[numericId]){
					if(slideDirection=='right'){
						subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + submenuObjArray[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
					}else{
						subObj.style.left = getLeftPos(submenuObjArray[numericId]['parentDiv']) + xOffsetSubMenu + 'px';

					}
					submenuObjArray[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
					subObj.style.top = getTopPos(submenuObjArray[numericId]['parentDiv']) + 'px';
					subPositioned[numericId] = true;
				}
				subObj.style.visibility = 'visible';
				subObj.style.zIndex = currentZIndex;
				currentZIndex++;
				this.className='activeMainMenuItem';
				activeMainMenuItem = this;
			}
		}else{
			var numericId = activeSubMenuId;
		}
		if(activeSubMenuId && (numericId!=activeSubMenuId || !subObj))slideMenu(activeSubMenuId,(slideSpeed_in*-1));
		if(numericId!=activeSubMenuId && this && subObj){
			subObj.style.width = '0px';
			slideMenu(numericId,slideSpeed_out);
			activeSubMenuId = numericId;
		}else{
			if(numericId!=activeSubMenuId)activeSubMenuId = false;
		}
		if(showSubOnMouseOver)stopAutoHide();
	}
//....

	function showSub_Public()
	{
		var subObj = false;
		if(this && this.tagName){
			var numericId = this.parentNode.id.replace(/[^0-9]/g,'');
			okToSlideInSub_Public[numericId] = false;
			var subObj = document.getElementById('subMenuDiv' + numericId);
			if(activeMainMenuItem_Public)activeMainMenuItem_Public.className='';
			if(subObj){
				if(!subPositioned_Public[numericId]){
					if(slideDirection=='right'){
						subObj.style.left = getLeftPos(submenuObjArray_Public[numericId]['parentDiv']) + submenuObjArray_Public[numericId]['parentDiv'].offsetWidth + xOffsetSubMenu + 'px';
					}else{
						subObj.style.left = getLeftPos(submenuObjArray_Public[numericId]['parentDiv']) + xOffsetSubMenu + 'px';

					}
					submenuObjArray_Public[numericId]['left'] = subObj.style.left.replace(/[^0-9]/g,'');
					subObj.style.top = getTopPos(submenuObjArray_Public[numericId]['parentDiv']) + 'px';
					subPositioned_Public[numericId] = true;
				}
				subObj.style.visibility = 'visible';
				subObj.style.zIndex = currentZIndex;
				currentZIndex++;
				this.className='activeMainMenuItem_Public';
				activeMainMenuItem_Public = this;
			}
		}else{
			var numericId = activeSubMenuId_Public;
		}
		if(activeSubMenuId_Public && (numericId!=activeSubMenuId_Public || !subObj))slideMenu_Public(activeSubMenuId_Public,(slideSpeed_in*-1));
		if(numericId!=activeSubMenuId_Public && this && subObj){
			subObj.style.width = '0px';
			slideMenu_Public(numericId,slideSpeed_out);
			activeSubMenuId_Public = numericId;
		}else{
			if(numericId!=activeSubMenuId_Public)activeSubMenuId_Public = false;
		}
		if(showSubOnMouseOver_Public)stopAutoHide_Public();
	}

	function slideMenu(menuIndex,speed){
		var obj = submenuObjArray[menuIndex]['divObj'];
		var obj2 = submenuObjArray[menuIndex]['ulObj'];
		var width = obj.offsetWidth + speed;
		if(speed<0){
			if(width<0)width = 0;
			obj.style.width = width + 'px';
			if(slideDirection=='left'){
				obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
				obj2.style.left = '0px';
			}else{
				obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
			}
			if(width>0 && okToSlideInSub[menuIndex])setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
				obj.style.visibility = 'hidden';
				obj.style.width = '0px';
				if(activeSubMenuId==menuIndex)activeSubMenuId=false;
			}

		}else{
			if(width>submenuObjArray[menuIndex]['width'])width = submenuObjArray[menuIndex]['width'];
			if(slideDirection=='left'){
				obj.style.left = submenuObjArray[menuIndex]['left'] - width + 'px';
				obj2.style.left = '0px';
			}else{
				obj2.style.left = width - submenuObjArray[menuIndex]['width'] + 'px'
			}

			obj.style.width = width + 'px';
			if(width<submenuObjArray[menuIndex]['width']){
				setTimeout('slideMenu(' + menuIndex + ',' + speed + ')',slideTimeout_out);
			}else{
				okToSlideInSub[menuIndex] = true;
			}
		}
	}

// ....
	function slideMenu_Public(menuIndex,speed){
		var obj = submenuObjArray_Public[menuIndex]['divObj'];
		var obj2 = submenuObjArray_Public[menuIndex]['ulObj'];
		var width = obj.offsetWidth + speed;
		if(speed<0){
			if(width<0)width = 0;
			obj.style.width = width + 'px';
			if(slideDirection=='left'){
				obj.style.left = submenuObjArray_Public[menuIndex]['left'] - width + 'px';
				obj2.style.left = '0px';
			}else{
				obj2.style.left = width - submenuObjArray_Public[menuIndex]['width'] + 'px'
			}
			if(width>0 && okToSlideInSub_Public[menuIndex])setTimeout('slideMenu_Public(' + menuIndex + ',' + speed + ')',slideTimeout_in); else{
				obj.style.visibility = 'hidden';
				obj.style.width = '0px';
				if(activeSubMenuId_Public==menuIndex)activeSubMenuId_Public=false;
			}

		}else{
			if(width>submenuObjArray_Public[menuIndex]['width'])width = submenuObjArray_Public[menuIndex]['width'];
			if(slideDirection=='left'){
				obj.style.left = submenuObjArray_Public[menuIndex]['left'] - width + 'px';
				obj2.style.left = '0px';
			}else{
				obj2.style.left = width - submenuObjArray_Public[menuIndex]['width'] + 'px'
			}

			obj.style.width = width + 'px';
			if(width<submenuObjArray_Public[menuIndex]['width']){
				setTimeout('slideMenu_Public(' + menuIndex + ',' + speed + ')',slideTimeout_out);
			}else{
				okToSlideInSub_Public[menuIndex] = true;
			}
		}
	}
  #2 (permalink)  
Antiguo 06/06/2006, 09:13
 
Fecha de Ingreso: diciembre-2003
Ubicación: Málaga
Mensajes: 495
Antigüedad: 20 años, 4 meses
Puntos: 0
Código:
	function resetPosition()
	{
		subPositioned.length = 0;
		subPositioned_Public.length = 0;
	}

	function initLeftMenu()
	{
		var menuObj = document.getElementById('menu_publico');
		var mainMenuItemArray = new Array();
  		var mainMenuItem = menuObj.getElementsByTagName('li')[0];
  		while(mainMenuItem){
			if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
				mainMenuItemArray[mainMenuItemArray.length] = mainMenuItem;
				var aTag = mainMenuItem.getElementsByTagName('A')[0];
				if(showSubOnMouseOver)
					aTag.onmouseover = showSub;
				else
					aTag.onclick = showSub;
			}
			mainMenuItem = mainMenuItem.nextSibling;
		}

		var lis = menuObj.getElementsByTagName('a');
		for(var no=0;no<lis.length;no++){
			if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
			lis[no].onmouseout = initAutoHide;
			lis[no].onmousemove = stopAutoHide;
		}

		for(var no=0;no<mainMenuItemArray.length;no++){
			var sub = mainMenuItemArray[no].getElementsByTagName('ul')[0];
			if(sub){
				mainMenuItemArray[no].id = 'mainMenuItem' + (no+1);
				var div = document.createElement('div');
				div.className='dhtmlgoodies_subMenu_publico';
				document.body.appendChild(div);
				div.appendChild(sub);
				if(slideDirection=='right'){
					div.style.left = getLeftPos(mainMenuItemArray[no]) + mainMenuItemArray[no].offsetWidth + xOffsetSubMenu + 'px';
				}else{
					div.style.left = getLeftPos(mainMenuItemArray[no]) + xOffsetSubMenu + 'px';
				}
				div.style.top = getTopPos(mainMenuItemArray[no]) + 'px';
				div.id = 'subMenuDiv' + (no+1);
				sub.id = 'submenuUl' + (no+1);
				sub.style.position = 'relative';
				if(navigator.userAgent.indexOf('Opera')>=0){
					submenuObjArray[no+1] = new Array();
					submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
					submenuObjArray[no+1]['divObj'] = div;
					submenuObjArray[no+1]['ulObj'] = sub;
					submenuObjArray[no+1]['width'] = sub.offsetWidth;
					submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
				}
				sub.style.left = 1 - sub.offsetWidth + 'px';

				if(document.all)div.style.width = '1px';

				if(navigator.userAgent.indexOf('Opera')<0){
					submenuObjArray[no+1] = new Array();
					submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray[no];
					submenuObjArray[no+1]['divObj'] = div;
					submenuObjArray[no+1]['ulObj'] = sub;
					submenuObjArray[no+1]['width'] = sub.offsetWidth;


					submenuObjArray[no+1]['left'] = div.style.left.replace(/[^0-9]/g,'');
					if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
				}

				if(!document.all)div.style.width = '1px';

			}
		}
		menuObj.style.visibility = 'visible';
}


function initLeftMenu1()
	{
		var menuObj1 = document.getElementById('menu_privado');
		var mainMenuItemArray1 = new Array();
		var mainMenuItem = menuObj1.getElementsByTagName('LI')[0];
		while(mainMenuItem){
			if(mainMenuItem.tagName && mainMenuItem.tagName.toLowerCase()=='li'){
				mainMenuItemArray1[mainMenuItemArray1.length] = mainMenuItem;
				var aTag = mainMenuItem.getElementsByTagName('A')[0];
				if(showSubOnMouseOver)
					aTag.onmouseover = showSub;
				else
					aTag.onclick = showSub;
			}
			mainMenuItem = mainMenuItem.nextSibling;
		}

		var lis = menuObj1.getElementsByTagName('A');
		for(var no=0;no<lis.length;no++){
			if(!showSubOnMouseOver)lis[no].onmouseover = stopAutoHide;
			lis[no].onmouseout = initAutoHide;
			lis[no].onmousemove = stopAutoHide;
		}

		for(var no=0;no<mainMenuItemArray1.length;no++){
			var sub = mainMenuItemArray1[no].getElementsByTagName('UL')[0];
			if(sub){
				mainMenuItemArray1[no].id = 'mainMenuItem' + (no+1);
				var div1 = document.createElement('DIV');
				div1.className='dhtmlgoodies_subMenu_privado';
				document.body.appendChild(div1);

				div1.appendChild(sub);
				if(slideDirection=='right'){
					div1.style.left = getLeftPos(mainMenuItemArray1[no]) + mainMenuItemArray1[no].offsetWidth + xOffsetSubMenu + 'px';
				}else{
					div1.style.left = getLeftPos(mainMenuItemArray1[no]) + xOffsetSubMenu + 'px';
				}
				div1.style.top = getTopPos(mainMenuItemArray1[no]) + 'px';
				div1.id = 'subMenuDiv' + (no+1);
				sub.id = 'submenuUl' + (no+1);
				sub.style.position = 'relative';

				if(navigator.userAgent.indexOf('Opera')>=0){
					submenuObjArray[no+1] = new Array();
					submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray1[no];
					submenuObjArray[no+1]['divObj'] = div1;
					submenuObjArray[no+1]['ulObj'] = sub;
					submenuObjArray[no+1]['width'] = sub.offsetWidth;
					submenuObjArray[no+1]['left'] = div1.style.left.replace(/[^0-9]/g,'');
				}
				sub.style.left = 1 - sub.offsetWidth + 'px';

				if(document.all)div1.style.width = '1px';

				if(navigator.userAgent.indexOf('Opera')<0){
					submenuObjArray[no+1] = new Array();
					submenuObjArray[no+1]['parentDiv'] = mainMenuItemArray1[no];
					submenuObjArray[no+1]['divObj'] = div1;
					submenuObjArray[no+1]['ulObj'] = sub;
					submenuObjArray[no+1]['width'] = sub.offsetWidth;
					submenuObjArray[no+1]['left'] = div1.style.left.replace(/[^0-9]/g,'');
					if(fixedSubMenuWidth)submenuObjArray[no+1]['width'] = fixedSubMenuWidth;
				}

				if(!document.all)div1.style.width = '1px';
    			}
		}
		menuObj1.style.visibility = 'visible';
}


function initLeftMenu_public()
	{
		var menuObj_public = document.getElementById('menu_publico');
		var mainMenuItemArray_public = new Array();
		var mainMenuItem_public = menuObj_public.getElementsByTagName('LI')[0];
		while(mainMenuItem_public){
			if(mainMenuItem_public.tagName && mainMenuItem_public.tagName.toLowerCase()=='li'){
				mainMenuItemArray_public[mainMenuItemArray_public.length] = mainMenuItem_public;
				var aTag = mainMenuItem_public.getElementsByTagName('A')[0];
				if(showSubOnMouseOver_Public)
					aTag.onmouseover = showSub_Public;
				else
					aTag.onclick = showSub_Public;
			}
			mainMenuItem_public = mainMenuItem_public.nextSibling;
		}

		var lis_public = menuObj_public.getElementsByTagName('A');
		for(var num=0;num<lis_public.length;num++){
			if(!showSubOnMouseOver_Public)lis_public[num].onmouseover = stopAutoHide_Public;
			lis_public[num].onmouseout = initAutoHide_Public;
			lis_public[num].onmousemove = stopAutoHide_Public;
		}

		for(var num=0;num<mainMenuItemArray_public.length;num++){
			var sub_public = mainMenuItemArray_public[num].getElementsByTagName('UL')[0];
			if(sub_public){
				mainMenuItemArray_public[num].id = 'mainMenuItem_public' + (num+1);
				var div_public = document.createElement('DIV');
				div_public.className='dhtmlgoodies_subMenu_public';
				document.body.appendChild(div_public);

				div_public.appendChild(sub_public);
				if(slideDirection=='right'){
					div_public.style.left = getLeftPos(mainMenuItemArray_public[num]) + mainMenuItemArray_public[num].offsetWidth + xOffsetSubMenu + 'px';
				}else{
					div_publilc.style.left = getLeftPos(mainMenuItemArray_public[num]) + xOffsetSubMenu + 'px';
				}
				div_public.style.top = getTopPos(mainMenuItemArray_public[num]) + 'px';
				div_public.id = 'subMenuDiv' + (num+1);
				sub_public.id = 'submenuUl' + (num+1);
				sub_public.style.position = 'relative';

				if(navigator.userAgent.indexOf('Opera')>=0){
					submenuObjArray_Public[num+1] = new Array();
					submenuObjArray_Public[num+1]['parentDiv'] = mainMenuItemArray_public[num];
					submenuObjArray_Public[num+1]['divObj'] = div_public;
					submenuObjArray_Public[num+1]['ulObj'] = sub_public;
					submenuObjArray_Public[num+1]['width'] = sub_public.offsetWidth;
					submenuObjArray_Public[num+1]['left'] = div_public.style.left.replace(/[^0-9]/g,'');
				}
				sub_public.style.left = 1 - sub_public.offsetWidth + 'px';

				if(document.all)div_public.style.width = '1px';

				if(navigator.userAgent.indexOf('Opera')<0){
					submenuObjArray_Public[num+1] = new Array();
					submenuObjArray_Public[num+1]['parentDiv'] = mainMenuItemArray_public[num];
					submenuObjArray_Public[num+1]['divObj'] = div_public;
					submenuObjArray_Public[num+1]['ulObj'] = sub_public;
					submenuObjArray_Public[num+1]['width'] = sub_public.offsetWidth;
					submenuObjArray_Public[num+1]['left'] = div_public.style.left.replace(/[^0-9]/g,'');
					if(fixedSubMenuWidth_Public)submenuObjArray_Public[num+1]['width'] = fixedSubMenuWidth_Public;
				}

				if(!document.all)div_public.style.width = '1px';
    			}
		}
		menuObj_public.style.visibility = 'visible';
    }
Resumiendo el codigo, he duplicado las funcionas las cuales cambiaban del menu publico al privado y ahora lo k me pasa es k :

si esta en el publico: me aparece bien.
si esta en el privado: me aparece el privado bien, pero el publico no me aparece el submenu.

He probado todas las formas y les cuento:

si cargo la pagina del privado(tiene privado+publico) y comento la linea q carga el menu privado, me aparece bien el menu publico.

Bueno gracias y un saludo
  #3 (permalink)  
Antiguo 06/06/2006, 15:30
 
Fecha de Ingreso: diciembre-2003
Ubicación: Málaga
Mensajes: 495
Antigüedad: 20 años, 4 meses
Puntos: 0
He estado probando poner todo en una misma funcion y llama a las etiquetas div igual y nada, alguna sugerencia?
  #4 (permalink)  
Antiguo 08/06/2006, 00:35
 
Fecha de Ingreso: diciembre-2003
Ubicación: Málaga
Mensajes: 495
Antigüedad: 20 años, 4 meses
Puntos: 0
Quería preguntar una cosa. Lo mismo q se crea una etiqueta div
Código:
document.createElement('div');
para el submenu se tendria q crear otra etiqueta div para cerrarlo???
  #5 (permalink)  
Antiguo 15/12/2006, 16:52
 
Fecha de Ingreso: diciembre-2006
Mensajes: 213
Antigüedad: 17 años, 4 meses
Puntos: 3
Re: Menu desplegable PHP+javascript

Saludos, he trabajado con este menú y es excelente, pero necesito que dentro de un submenu, esté otro submenú, comno puedo hacer? ya intenté con agregar otra lista pero nada, ojalá me puedan ayudar porque me urge
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:25.